<template>
    <div class="recommend">
        <div class="ground-title">
            <img class="ground-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
            <span class="title">猜你喜欢</span>
        </div>
        <ul>
            <router-link
              class="item border-bottom"
              v-for="item of likelist"
              :key="item.id"
              tag="li"
              :to="'/detail/'+item.id"
            >
                <div class="item-img">
                    <img class="item-img-content" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <div class="title">{{item.title}}</div>
                    <div class="comment">{{item.commentNum}}</div>
                    <div class="price">
                        <span class="price-N">
                            ¥
                            <em class="price-num">{{item.priceNum}}</em>
                        </span>
                        起
                        <span class="address">{{item.address}}</span>
                    </div>
                    <div class="feature" v-if="item.feature">
                        <div class="feature-content">{{item.feature}}</div>
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    likelist: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.recommend
  background $bgColorFff
  padding-left .2rem
  .ground-title
    padding .34rem 0 .32rem 0
    margin-top .2rem
    font-size .32rem
    .ground-img
      display inline-block
      width .3rem
      height .3rem
    .title
      margin-right 0.1rem
  .item
    padding .2rem 0
    display flex
    .item-img
      width 2rem
      height 2rem
      .item-img-content
        display inline-block
        width 100%
        height 100%
    .item-info
      flex 1
      padding-left .22rem
      padding-top .3rem
      .title
        font-size .32rem
      .comment
        color #616161
        font-size .22rem
        padding-top .3rem
      .price
        position relative
        padding-top .35rem
        .price-N
          color: #ff8300
          .price-num
            font-size .4rem
        .address
          position absolute
          right 20px
          bottom 0
      .feature
        display inline-block
        background #fff9f9
        padding .04rem .1rem
        color #ff5555
        font-size .24rem
        line-height .34rem
        margin-top .48rem

</style>
